<template>
  <div>
    <!-- 城市列表 -->
      <!-- 标题 -->
    <van-nav-bar title="城市列表" left-arrow @click-left="onClickLeft" />
    <!-- 城市列表 -->
    <van-index-bar>
      <div v-for="(item, i) in az" :key="i">
        <van-index-anchor :index="item" />

        <div v-for="(ite, i) in list" :key="i">
          <van-cell
          @click="choose(ite)"
            :title="ite.label"
            v-if="ite.short[0].toUpperCase() === item"
          />
        </div>
      </div>
    </van-index-bar>
  </div>
</template>

<script>
import { Lists } from '@/api'
export default {
  data () {
    return {
      // 所有数据
      list: [],
      // listLs: JSON.parse(localStorage.getItem('City')) || this.list,
      az: [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ]

    }
  },
  // 获取城市列表的数据 short 拼音首字母
  async created () {
    const res = await Lists()
    console.log('res' + res)
    console.log(res)
    this.list = res.data.body
    // localStorage.setItem('City', JSON.stringify(this.list))
  },
  methods: {
    // 返回
    onClickLeft () {
      this.$router.replace('/Find')
    },
    // 城市每一项的点击事件
    // 点击之后会跳转 顺便把点击这个城市对象的ID传过去
    choose (it) {
      console.log(it)
      localStorage.setItem('id', JSON.stringify(it))
      this.$router.push('/Find')

      // this.$router.replace({
      //   path: '/Find',
      //   query: {
      //     it: it
      //   }
      // })
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__content {
  background-color: #21b97a;
  .van-nav-bar__title {
    color: #fff;
  }
  .van-icon {
    color: #fff;
  }
}
</style>
